import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
import {ImageSlider} from '../../../shared/components/image-slider/image-slider.component';
import {Channel} from '../../../shared/components/horizontal-grid/horizontal-grid.component';
import {ActivatedRoute} from '@angular/router';
import {HomeService} from '../../services/home.service';
import {filter, map, switchMap} from 'rxjs/operators';
import {Observable, Subscription} from 'rxjs';
import {Ad, Product} from '../../../shared/domain';

@Component({
  selector: 'app-home-detail',
  templateUrl: './home-detail.component.html',
  styleUrls: ['./home-detail.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeDetailComponent implements OnInit, OnDestroy {
  constructor(
    private route: ActivatedRoute,
    private service: HomeService,
  ) {
  }

  selectedTabLink$: Observable<string>;
  imageSliders$: Observable<ImageSlider[]>;
  channels$: Observable<Channel[]>;
  ad$: Observable<Ad>;
  products$: Observable<Product[]>;
  sub: Subscription;

  ngOnInit(): void {
    this.selectedTabLink$ = this.route.paramMap
      .pipe(
        filter(params => params.has('tabLink')),
        map(params => params.get('tabLink'))
      );
    this.sub = this.route.queryParamMap.subscribe(params => {
      console.log('查询参数：', params);
    });
    this.imageSliders$ = this.service.getBanners();
    this.channels$ = this.service.getChannels();
    this.ad$ = this.selectedTabLink$.pipe(
      switchMap(tab => this.service.getAdByTab(tab)),
      filter(ads => ads.length > 0),
      map(ads => ads[0])
    );
    this.products$ = this.selectedTabLink$.pipe(
      switchMap(tab => this.service.getProductByTab(tab))
    );
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}
